<template>
	<div >
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
					<el-form :inline="true">
						<el-row :gutter="35">
			              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
                                    <el-form-item  >
                      <el-select v-model="selectType" class="full-width-input" clearable filterable multiple
                        placeholder="设备类型">
                        <el-option v-for="(item, index) in equipTypes" :key="index" :label="item.item2"
                          :value="item.item1"></el-option>
                      </el-select>
                    </el-form-item>
        			              </el-col>

                                  <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
                                    <el-form-item label="设备标志">
			              <el-input v-model="flag" clearable placeholder="设备标志,支持多个"/>
			              </el-form-item>
        			              </el-col>
                
			          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20 search-actions">
         
			         
                        <el-button @click="clearLog">清空</el-button>

                        <el-button @click="pause">暂停恢复</el-button>
			          </el-col>
			      </el-row>
			      </el-form>
	   </el-card>
		<el-card shadow="hover" style="margin-top: 8px">
			
			
           
      <el-input type="textarea" placeholder="日志内容" v-model="textareaLog" rows="40" :show-word-limit="true"></el-input>
   
			
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { ElMessageBox, ElMessage } from "element-plus";
	import { auth } from '/@/utils/authFunction';
	//import { formatDate } from '/@/utils/formatTime';

	import { signalR } from '/@/views/system/onlineUser/signalR';
	import {  onMounted,onUnmounted } from 'vue';
    import { formatDate } from '/@/utils/formatTime';
    import { getEquipTypes } from '/@/api/main/equipInfo';

	    const textareaLog=ref("");
	
		const selectType = ref<[]>();
        
		const flag=ref("");

    const equipTypes=ref<any>([]);
		
     

// 页面加载时
onMounted(async () => {
	

	

	// 接收站内信
	signalR.on('ReceiveRemoteMessage', receiveMessage);


});

onUnmounted(()=>{
    signalR.off('ReceiveRemoteMessage');

});

const index=ref(0);
const begin=ref(true);

const clearLog=()=>{
    index.value=0;
    textareaLog.value='';

};
const pause=()=>{

   begin.value=!begin.value;
};

const receiveMessage = (msg: any) => {

    debugger;
  
   if(!begin.value) return;
   
   if(selectType.value && selectType.value.length>0){
    let values=selectType.value as any[];
     let datas= values.filter(x=>x==msg.title || x==msg.id);
     if(!datas || datas.length==0){
        return;
     }
   }
   if(flag.value){
    if(!flag.value.includes(msg.flag)){
        return;
    }
   }
    if(index.value>300){
        textareaLog.value='';
        index.value=0;     
    }
    let time=formatDate(new Date(msg.createTime),'YYYY-mm-dd HH:MM:SS')
    index.value++;
    let log=`${index.value}.  ${time} 名称 ${msg.id} 类型 ${msg.title} - ${msg.content} 标志 ${msg.flag} ${msg.type==0?'':'异常'}  \n \n`
	textareaLog.value=log+textareaLog.value;

};

// 初始化
const iniQuery=async()=>{
	
	
	
	var rep=await getEquipTypes();
	equipTypes.value=rep.data.result;




}

iniQuery();

</script>


